<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<template #top>
				<div class="homeTop">
					<image class="homeImg" src="/static/images/banner.png"></image>
					<uni-search-bar class="uni-mt-10" radius="20" placeholder="油站名称/高速名称/省市区" clearButton="auto"
						cancelButton="none" bgColor="#fff" v-model="queryParams.keyword" @confirm="search" />
				</div>
				<div class="homeTitle">
					<div class="t1">全部油站</div>
					<div class="zflex zcenter">
						<div class="zflex zcenter">
							<picker @change="bindChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
							<image class="jiao" src="/static/images/jiao.png"></image>
						</div>
						<div class="zflex zcenter" style="margin-left: 14px;">
							<picker @change="bindChange2" :value="index2" :range="array2">
								<view class="uni-input">{{array2[index2]}}</view>
							</picker>
							<image class="jiao" src="/static/images/jiao.png"></image>
						</div>


					</div>
					<!-- <div>加油筛选 加气筛选   距离点击率排序</div> -->
				</div>
			</template>

			<view class="homeWrap" v-for="(item,index) in dataList" :class="item.isTop===1?'homeWrapTui':''">
				<div class="tjyz" v-if="item.isTop===1">推荐油站</div>
				<div class="hview" @click="goPage('/pages/index/addoil?id='+ item.id +'&distance=' + item.distance)">
					<div class="same-w">
						<div class="same-lef">
							<span class="item-title">{{item.stationName}}</span>
						</div>
						<div class="same-rig">
							<div class="distance-w">
								<image src="/static/images/loc.png"></image>
								<div class="txt">{{item.distance}}km</div>
							</div>
						</div>
					</div>
					<div class="same-w" style="margin-top: 6px;">
						<image class="youx" src="/static/images/youxuan.png"></image>
						<div class="tagyou" v-if="item.stationType==1||item.stationType==0">加油站</div>
						<div class="tagyou tagqi" v-if="item.stationType==2||item.stationType==0">加气站</div>
					</div>
					<div class="same-w" style="margin-top: 6px;">
						<div class="same-lef" style="color: #83878E;font-size: 11px;">
							{{item.city}}{{item.district}}{{item.address}}
						</div>
					</div>

					<div class="same-w" style="margin-top: 12px;">
						<div class="zflex" style="margin-right: auto;align-items: flex-end;">
							<div class="mtxt1">¥</div>
							<div class="mtxt2">{{item.discountPrice}}</div>
							<div class="mtxt3">/L</div>
							<div class="tagyou" style="height: 18px;padding:0 4px;">团油价</div>
							<div class="mtxt4">挂牌价¥{{item.ndrcPrice}}</div>
						</div>
						<div class="oilbtn">去加油</div>
					</div>
					<div class="same-w" style="margin-top: 2px;">
						<div class="shenBor">{{item.tag}}</div>
					</div>
				</div>
			</view>

			<!-- 			<view class="baseCon">
								<tki-qrcode v-if="ewmData.ifShow" cid="qrcode2" ref="qrcode2" :val="ewmData.val" :size="ewmData.size"
					:onval="ewmData.onval" :loadMake="ewmData.loadMake" :usingComponents="true" />
			</view> -->
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
		</z-paging>

	</view>
</template>

<script>
	import {
		stationlistPage,
		getOilAllName,
	} from '@/request/api.js'
	import {
		setToken,
		setUserInfo,
		getToken,
		setPermission
	} from '@/utils/auth'
	export default {
		components: {},
		data() {
			return {
				val: '',
				show: true,
				dataList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					latitude: '',
					longitude: '',
					keyword: '',
					sort: 1, //1按距离升序 2按点击数降序
					oilName: '', //默认全部
				},

				array: ['全部'],
				index: 0,
				array2: ['距离', '点击数'],
				index2: 0,
			}
		},
		mounted() {
			this.oilList()
		},
		onShareAppMessage() {
			return {
				title: ' ',
				path: '/pages/index/index'
			};
		},
		onShow() {
			this.initSearch()
		},
		methods: {
			oilList() {
				const list = ['全部']
				getOilAllName().then(res => {
					console.log('res', res)
					list.push(res.data)
					this.array = list
				})
			},

			initSearch() {
				const that = this
				uni.getLocation({
					type: 'wgs84', //wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
					success: function(res) {
						that.queryParams.latitude = res.latitude
						that.queryParams.longitude = res.longitude
						that.$refs.paging.reload(false);
					},
					fail: function(err) {
						//console.log('err', err)
						that.initSearch()
					}
				})
				// this.$refs.paging.reload(false);
			},
			search() {
				this.$refs.paging.reload(false);
			},

			queryList(pageNo, pageSize) {
				let data = this.queryParams;
				data.pageNum = pageNo
				data.pageSize = pageSize
				stationlistPage(this.queryParams).then((response) => {
					console.log('ressss', response)
					this.$refs.paging.complete(response.rows)
				}).catch(() => {
					this.$refs.paging.complete(false);
				})
			},

			bindChange: function(e) {
				this.index = e.detail.value
				const name = this.array[this.index]
				this.queryParams.oilName = name === '全部' ? '' : name
				this.$refs.paging.reload(false);
			},
			bindChange2: function(e) {
				this.index2 = e.detail.value
				if (this.index2 == 0) {
					this.queryParams.sort = 1
				} else {
					this.queryParams.sort = 2
				}
				this.$refs.paging.reload(false);
			},

			goPage(row) {
				uni.navigateTo({
					url: row,
				})
			},


		}
	}
</script>

<style scoped>

</style>